<template>
  <!-- 结算报表 -->
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="orderId">
        <el-input v-model="list.filter.orderId" placeholder="订单号" />
      </el-form-item>
      <el-form-item prop="productName">
        <el-input v-model="list.filter.productName" placeholder="商品名称" />
      </el-form-item>
      <el-form-item prop="payNo">
        <el-input v-model="list.filter.payNo" placeholder="支付单号" />
      </el-form-item>
      <el-form-item prop="belongMerchantId">
        <merchantSelect
          v-model="list.filter.belongMerchantId"
          noPermission
          placeholder="所属商户"
        />
      </el-form-item>
      <el-form-item prop="belongSubMerchantId">
        <SubMchSelect
          v-model="list.filter.belongSubMerchantId"
          noPermission
          placeholder="所属店铺"
        />
      </el-form-item>
      <el-form-item prop="saleMerchantId">
        <merchantSelect
          v-model="list.filter.saleMerchantId"
          noPermission
          placeholder="销售商户"
        />
      </el-form-item>
      <el-form-item prop="saleSubMerchantId">
        <SubMchSelect
          v-model="list.filter.saleSubMerchantId"
          noPermission
          placeholder="销售店铺"
        />
      </el-form-item>
      <el-form-item prop="reasonTypeList">
        <KiSelect
          v-model="list.filter.reasonTypeList"
          :options="settlementTypeOpt"
          placeholder="结算类型"
          multiple
          collapse-tags
        />
      </el-form-item>
      <el-form-item prop="startTime">
        <el-date-picker
          v-model="list.filter.startTime"
          type="date"
          placeholder="开始时间"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="endTime">
        <el-date-picker
          v-model="list.filter.endTime"
          type="date"
          placeholder="结束时间"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="productSource">
        <KiSelect
          v-model="list.filter.productSource"
          :options="[
            { dataName: '是', dataValue: '1' },
            { dataName: '否', dataValue: '0' }
          ]"
          placeholder="是否云仓市场"
        />
      </el-form-item>
      <el-form-item prop="tradePartner">
        <el-input v-model="list.filter.tradePartner" placeholder="结算对象" />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <span>
        <ExportExcel
          url="/sot-admin-api/report/report/downloadAuditReport"
          name="导出"
          :param="{
            merchantId: getReportMchId,
            ...list.filter,
            orderBy: 'create_time desc'
          }"
        />
      </span>

      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column type="index" />
      <el-table-column label="商品名称" prop="productName" />
      <el-table-column label="商品数量" prop="quantity" />
      <el-table-column label="所属商户" prop="belongMerchantName" />
      <el-table-column label="所属店铺" prop="belongSubMerchantName" />
      <el-table-column label="销售商户" prop="saleMerchantName" />
      <el-table-column label="销售店铺" prop="saleSubMerchantName" />
      <el-table-column label="结算类型">
        <template v-slot="{ row }">
          {{ row.reasonType | $value2label(settlementTypeOpt) }}
        </template>
      </el-table-column>
      <el-table-column label="结算对象" prop="tradePartner" />
      <el-table-column label="交易金额(元)">
        <template v-slot="{ row }">
          <span style="color: #409EFF;">{{ row.money | $cent2yuan }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="orderId" />
      <el-table-column label="支付单号" prop="payNo" />
      <el-table-column label="结算方式">
        <template v-slot="{ row }">
          <span v-if="row.payMethod == 0">银联</span>
          <span v-else-if="row.payMethod == 1">微信</span>
          <span v-else-if="row.payMethod == 2">支付宝</span>
          <span v-else>其他</span>
        </template>
      </el-table-column>
      <el-table-column label="结算时间" prop="auditTime" width="160" />
    </el-table>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import merchantSelect from '@/components/merchantSelect'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import TimeRangePicker from 'time-range-picker'
import { settlementTypeOpt } from './reasonTypeOpt.js'
import SubMchSelect from '@/components/SubMchSelect'
export default {
  components: {
    merchantSelect,
    SubMchSelect
  },
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/report/report',
      axiosConfig: {
        getList: {
          url: 'queryOrderAudit'
        }
      },
      list: {
        filter: {
          startTime: TimeRangePicker.defaultDate.currentMonth[0],
          endTime: TimeRangePicker.defaultDate.currentMonth[1]
        }
      }
    }),
  data () {
    return {
      settlementTypeOpt
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    getReportMchId () {
      //平台查全部
      const userInfo = this.userInfo
      return userInfo.userType == 0 ? '' : userInfo.merchantId
    }
  }
}
</script>
